<!--
 * @Author: 冯尚新 fengshangxin@yunjinhz.com
 * @Date: 2023-05-23 10:51:58
 * @LastEditors: 冯尚新 fengshangxin@yunjinhz.com
 * @LastEditTime: 2023-05-30 21:32:04
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\store\artcle\addExternalUnitsCase.vue
 * @Description: 外单位查获案件代管入库
-->

<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
    </theme-navbar>
    <!-- #endif -->
    <view class="content">
      <view class="form-style">
        <view class="form-style-title">
          <view class="left-info-tag"></view>
          <view class="fs-title">
            案件信息
          </view>
        </view>
        <u-form :model="baseInfo" ref="uForm" :error-type="['border-bottom', 'message',]" label-width="140" label-position="top" :border-bottom="false" :label-style="labelStyle">
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="案件编号" prop="caseCode">
                <u-input
                  placeholder="请输入"
                  v-model="baseInfo.caseCode"
                >
                </u-input>
                <u-icon name="search" :color="$theme.u_type_primary" size="44" @click="searchGoods"></u-icon>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="所属仓库" :required="true" prop="storeName">
                <u-input
                  :disabled="true"
                  :needValid="true"
                  placeholder="请选择"
                  v-model="baseInfo.storeName"
									:custom-style="pointerStyle"
                  @click="handlerSelect"
                >
                </u-input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="代管编号">
                <u-input
                  :disabled="true"
                  placeholder="自动生成，代管编号需要唯一"
                  v-model="baseInfo.custodyNo"
                >
                </u-input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-form-item label="办案单位" :border-bottom="false" prop="handleOrgType" :required="true">
            <view style="display: flex; flex-direction: column;width: 100%;">
              <dic-input
                :keyWord="$u.dic.DIC_KEYS.C_FEEDBACK_ORG_TYPE"
                :dicCode="baseInfo.handleOrgType"
                :border="false"
                type="select"
                :select-open="dicSelectOpen('handleOrgType',$u.dic.DIC_KEYS.C_FEEDBACK_ORG_TYPE)"
                placeholder="请选择"
                :disabled="true"
                v-model="baseInfo.handleOrgTypeName"
                @changeInputModelData="(name)=>{$set(baseInfo, 'handleOrgTypeName', name)}"
                @click="showDic($u.dic.DIC_KEYS.C_FEEDBACK_ORG_TYPE,baseInfo.handleOrgType,'handleOrgType')"
              />
              <u-line :color="$theme.u_border_color" style="margin-top: 20rpx"></u-line>
            </view>
          </u-form-item>
          <u-form-item prop="handleOrg">
            <u-input :border="true" :needValid="true" placeholder="请输入" v-model="baseInfo.handleOrg"></u-input>
          </u-form-item>
          <u-form-item label="立案编号" prop="regNo">
            <u-input
              placeholder="请输入"
              v-model="baseInfo.regNo"
            >
            </u-input>
          </u-form-item>
          <u-form-item label="案值（元）" prop="caseValue">
            <u-input
              placeholder="请输入"
              type="number"
              v-model="baseInfo.caseValue"
            >
            </u-input>
          </u-form-item>
          <u-form-item label="案发日期" prop="caseDate">
            <u-input
              placeholder="请选择"
              v-model="baseInfo.caseDate"
              @click="changeDate(0)"
            >
            </u-input>
          </u-form-item>
          <u-form-item label="立案日期" prop="handleDate">
            <u-input
              placeholder="请选择"
              v-model="baseInfo.handleDate"
              @click="changeDate(1)"
            >
            </u-input>
          </u-form-item>
          <u-form-item label="罚款金额（元）" prop="punishAmt">
            <u-input
              placeholder="请输入"
              type="number"
              v-model="baseInfo.punishAmt"
            >
            </u-input>
          </u-form-item>
          <u-form-item label="操作备注" :required="true" prop="remake">
            <u-input type="textarea" :border="false" placeholder="请填写备注" height="66" v-model="baseInfo.remake" />
          </u-form-item>
        </u-form>
      </view>
      <view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
      <view class="form-style" style="line-height: 62rpx;">
        <view class="form-style-title">
          <view class="left-info-tag" style="margin-top:14rpx"></view>
          <view class="fs-title">
            物品相关信息
          </view>
        </view>
        <view v-if="goodsList.length == 0">
          <u-input placeholder="当输入案件编号后可关联物品" :disabled="true" height="66" />
        </view>
        <view v-for="(item,index) in goodsList" :key="index" style="border-bottom:1px solid #DADADD;font-size:26rpx">
          <u-swipe-action
            :show="item.show"
            :index="item.goodsUuid"
            :disabled="item.swiperDisabled"
            @click="swiperClick(item.goodsUuid,index)"
            @open="swiperOpen(item)"
            :options="item.swiperOptions"
          >
            <view class="list_name">
              <view class="list_name_index">
                {{ index + 1 }}
              </view>
              <view style="font-size:30rpx">
                {{ item.goodsName }}
              </view>
            </view>
            <view>
              <text>
                当事人：
              </text>
              <text>
                {{ item.party }}
              </text>
            </view>
            <view>
              <text>
                物品大类：
              </text>
              <text>
                {{ item.propTypeName }}
              </text>
            </view>
            <view>
              <text>
                物品小类：
              </text>
              <text>
                {{ item.propSubtypeName }}
              </text>
            </view>
            <u-row gutter="16">
              <u-col span="4">
                <view class="part-item-info">
                  <view class="sub-title">
                    入库数量（条）
                  </view>
                  <view class="main-info">
                    {{ item.qty || 0 }}
                  </view>
                </view>
              </u-col>
              <u-col span="4">
                <view class="part-item-info">
                  <view class="sub-title">
                    可出库数量（条）
                  </view>
                  <view class="main-info">
                    {{ item.baseQty || 0 }}
                  </view>
                </view>
              </u-col>
              <u-col span="4">
                <view class="part-item-info">
                  <view class="sub-title">
                    出库数量（条）
                  </view>
                  <view class="main-info">
                    {{ item.outQty || 0 }}
                  </view>
                </view>
              </u-col>
            </u-row>
          </u-swipe-action>
        </view>
        <view class="add-sty">
          <u-icon name="plus-circle" color="#0070d2" size="38" style="vertical-align: middle;"></u-icon>
          <text class="add-label-sty" @click="addGoods">
            追加物品
          </text>
        </view>
      </view>
      <view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
      <view class="form-style">
        <view class="form-style-title">
          <view class="left-info-tag"></view>
          <view class="fs-title">
            附件列表
          </view>
        </view>
        <m-upload
          :uploadParam="fileUploadParam"
          upApiUrl="uploadBase64ForApp"
          :fileList="fileList"
          @on-list-change="changeUpload"
        ></m-upload>
      </view>
    </view>
    <view class="submit-btns btn-other-cls" style="margin-left:-30rpx">
      <u-button class="u-btn" type="primary" @click="submit">
        提交
      </u-button>
    </view>
    <!-- 字典单选 -->
    <dic-choice
      :keyWord="dicKeyWords"
      :currentSelect="dicCurrentSelect"
      v-model="dicShow"
      @confirm="selectDicConfirm"
    ></dic-choice>
    <u-calendar max-date="2099-12-31" v-model="caseDate" @change="handlerDate"></u-calendar>
  </view>
</template>

<script>
import MUpload from "@/components/m-upload.vue";
import { uuid, } from '@/common/util.js';
import storeService from '@/service/store/store.service.js';
import { ESCROW_TYPE, } from "@/service/store/mapping/enum.js"
import DicInput from "@/components/dic_input.vue";
import DicChoice from "@/components/dic_choice.vue";
export default {
  components: {
    MUpload,
    DicInput,
    DicChoice,
  },
  data() {
    return {
      customStyle:{
        padding:"20rpx 32rpx",
      },
      labelStyle:{
        'color':"#666666",
        'font-size':'13px',
      },
      fileUploadParam:{
        fiGroupCode:this.$FILE_GROUP_TYPE.c_custody_apply,
        // bizId:"",
      },
      detailItem: {},
      goodsList: [],
      baseInfo: {
        caseType: "cmd_case",
        custodyType: ESCROW_TYPE.EXTERNAL,
        docId: uuid(),
        photo: '',
        storeId:'',
      },
      fileList: [],
      rules: {
        handleOrgType: [{
          required: true,
          message: '请选择',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
        storeName: [{
          required: true,
          message: '请选择',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
        remake: [{
          required: true,
          message: '请输入',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
        handleOrg: [{
          required: true,
          message: '请输入',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
      },
      dicKeyWords: "",
      dicCurrentSelect:"",
      dicShow: false,
      caseDate: false,
      dateType: '',
      cloneGoodsList:[],
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-27 fsx start
			pointerStyle: {
			  marginRight: "5px",
				pointerEvents: "none !important"
			},
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-27 fsx end
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    getItemCanEdit (item) {
      let swiperOptions = [];
      swiperOptions.push({
        text: '删除',
        action:"delete",
        style: {
          backgroundColor: this.$theme.u_type_error,
        },
      });
      item.swiperOptions = swiperOptions;
      item.swiperDisabled = false;
    },
    swiperClick(index1, index) {
      this.goodsList.splice(index, 1);
      this.goodsList.map((val, idx) => {
        this.goodsList[idx].show = false;
      });
      this.$forceUpdate()
    },
    swiperOpen (item) {
      let id = item.goodsUuid + item.propSubType + item.propType + item.party;
      this.goodsList.map((val, idx) => {
        this.goodsList[idx].show = id == (val.goodsUuid + val.propSubType + val.propType + val.party);
      });
      this.$forceUpdate()
    },
    // 上传/删除图片事件
    changeUpload(list, key){
      if(list.length > 0){
        this.fileList = [...list,];
      }else{
        this.fileList = [];
      }
    },
    changeDate (type) {
      this.dateType = type;
      switch (type) {
      case 0:
        this.caseDate = true;
        break;
      case 1:
        this.caseDate = true;
        break;
      }
    },
    handlerDate (e) {
      if (this.dateType == 0) {
        this.baseInfo.caseDate = e.result;
      } else {
        this.baseInfo.handleDate = e.result;
      }
    },
    showDic(key, cur, type) {
      if (this.dicShow || this.isDisabled) return;
      this.dicKeyWords = key;
      this.dicCurrentSelect = cur;
      this.dicShow = true;
      this.dicType = type;
    },
    dicSelectOpen(type, keyWords) {
      if (type == this.dicType) {
        if (this.dicKeyWords == keyWords && this.dicShow) {
          return true;
        }
        return false;
      }
    },
    selectDicConfirm(e) {
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.C_FEEDBACK_ORG_TYPE){
        this.baseInfo.handleOrgTypeName = e[0].label;
        this.baseInfo.handleOrgType = e[0].extra.bcbCode;
      }
    },
    addGoods () {
      console.log(this.cloneGoodsList)
      let list = this.goodsList.slice(this.cloneGoodsList.length)
      this.setRouteParam(list);
      this.$u.route("pages/store/components/appendGoods?status=" + 'add');
    },
    searchGoods () { // 模糊查物品
      let param = {
        cmdCaseCode: this.baseInfo.caseCode,
      }
      this.$modal.showLoading('加载中...');
      storeService.getCmdCaseGoods(param).then(res => {
        if (res.success) {
          this.$modal.hideLoading();
          if(res.bean.info && res.bean.goods){
            this.baseInfo.caseDate = res.bean.info.caseDate
			this.baseInfo.handleDate = res.bean.info.handleDate
            this.baseInfo.caseValue = res.bean.info.caseValue
            this.baseInfo.handleOrg = res.bean.info.handleOrg
            this.baseInfo.handleOrgType = res.bean.info.handleOrgType
            this.baseInfo.regNo = res.bean.info.regNo
            this.goodsList = res.bean.goods.filter(item => {
              this.getItemCanEdit(item);
              item.show = false;
              item.swiperDisabled = false;
              return item;
            })
            this.cloneGoodsList = this.$u.deepClone(this.goodsList)
          }else{
            this.$u.toast('无案件信息');
          }
        } else {
          this.$modal.hideLoading();
          this.$u.toast(res.msg);
        }
      }).catch(err => {
        this.$modal.hideLoading();
        console.log(err)
      });
    },
    handlerSelect () {  // 选择仓库
      console.log(this.baseInfo.caseCode);
      this.$u.route("pages/store/components/selectWarehouseList?caseCode=" + this.baseInfo.caseCode)
    },
    updateBackState (param){
      if (param.select) {
        this.baseInfo.storeName = param.select[0].storeName
        this.baseInfo.storeId = param.select[0].storeId
      } else if (param.goodData) {
        this.goodsList.splice(this.cloneGoodsList.length)
        param.goodData.filter(item => {
          this.getItemCanEdit(item);
          item.show = false;
          item.swiperDisabled = false;
          return item;
        })
        this.goodsList = [...this.goodsList,...param.goodData,]
      }
      this.$forceUpdate()
    },
    submit () {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          if (this.goodsList.length == 0) return this.$u.toast('物品信息为空！')
          for (let i = 0; i < this.goodsList.length; i++) {
            if (this.$u.test.isEmpty(this.goodsList[i].qty)) {
              return this.$u.toast(`第【${i + 1}】条数量不允许为空或者0！`)
            }
          }
          if (this.fileList.length > 0) {
            let photoId = []
            this.fileList.forEach(item => {
              photoId.push(item.gfiId)
            })
            this.baseInfo.photo = photoId.join()
          }
          let param = {...this.baseInfo,custodyDtlList:this.goodsList,}
          this.$modal.showLoading('正在提交中...');
          storeService.saveCustodyInfo(param).then(res => {
            if (res.success) {
              this.$modal.hideLoading();
              this.backPrev({
                paramKey:'refresh',
                param:true,
              })
            } else {
              this.$modal.hideLoading();
              this.$u.toast(res.msg);
            }
          }).catch(err => {
            this.$modal.hideLoading();
            console.log(err)
          });
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.page{
  padding: 28rpx 30rpx;
}
.upload-sty{
  margin-left: -12rpx;
}
.pd-lf{
  padding-left: 0;
}
.pd-tp{
  padding-top: 13px;
}
.content{
  // padding: 24rpx 36rpx 180rpx 36rpx;
  padding-bottom: 180rpx;
}
.content-btn{
  padding: 24rpx 36rpx 20rpx 36rpx;
}
.fs-30{
  font-size:30rpx
}
.It-title{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #DADADD;
  padding-bottom: 11px;
  align-items: center;
}
.CT-title{
  font-size: 18px;
  font-weight: bold;
}
.CT-label{
  font-size: 13px;
  color: #989EA1;
  padding-bottom: 6px;
}
.CT-value{
  font-size: 14px;
  color: #393B3D;
}
.form-style-title{
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  width: 100%;
  align-items: flex-start;
}
.form-style{
  padding: 0rpx 8rpx
}
.left-info-tag{
  padding: 8px 2px;
  background-color: #ee8c4f ;
  border-radius: 22px;
  margin: 3px 6px 13px 0px;
}
.left-info-check-tag{
  padding: 8px 2px;
  background-color: #ee8c4f;
  border-radius: 22px;
  margin: 3px 6px 13px 0px;
}
.fs-title{
  font-weight: bold;
  font-size: 32rpx;
}
.loc-box {
  line-height: 38px;
  padding: 11px 0;
  font-size: 13px;
  color: #303133;
}
.inline-box {
  display: flex;
  align-items: center;
}
.loc-inline{
  font-size: 13px;
  color: #666666;
}
.part-item-info {
  text-align: left;
  .sub-title {
    color: $u-tips-color;
    padding-bottom: 10rpx;
    font-size: 26rpx;
  }
  .main-info {
    color: $u-content-color;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .main-info-color {
    color: $u-content-color;
    font-weight: 600;
    margin-bottom: 5px;
    color: red;
  }
}
.total-sty{
  padding-top: 20rpx;
}
.list_name{
  display: flex;
  &_index{
    background-color: #e0e0e0;
    width: 21px;
    height: 21px;
    margin: 7px 9px 0 0;
    border-radius: 50%;
    text-align: center;
    line-height: 21px;
  }
}
.good-popup-lay {
		padding: $cm-content-paddng-row;
		width: 100%;
		height: 100%;

		&__title {
			font-size: 36rpx;
			font-weight: 600;
			color: $u-main-color;
			margin: 10rpx 0;
			text-align: center;
			width: 100%;
		}

		&__btns {
			width: 100%;
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			uni-button {
				flex: 0.28;
			}
		}
	}
  .add-sty{
    padding: 0 6px;
    text-align: center;
    height: 40px;
    line-height: 50px;
  }
  .add-label-sty{
    padding-left: 5px;
    color: #0070d2;
    font-size: 16px;
  }
</style>
